<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>   
<head>
    <title>Beijing Alcatel-Lucent Bus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <!-- Combo-handled YUI CSS files: -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/button/assets/skins/sam/button.css">
    <!-- Combo-handled YUI JS files: -->
    <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/button/button-min.js&2.6.0/build/connection/connection-min.js&2.6.0/build/json/json-min.js"></script>

    <script type="text/javascript" src="http://api.mapabc.com/fmp/v1.0/js/fmp.js?key=d1ea565d65e2c62189c68dc31b216eb337a443b187efc933f93946ad0d85188bdc2eea5511dba634"></script>
    <style type="text/css" rel="stylesheet">
    .mapStyle
    { 
           border-top:1px solid #999;
           border-right:1px solid #999;
           border-bottom:1px solid #999;
           border-left:1px solid #999;
           height: 520px;
       }
    </style>
</head>
<body class=" yui-skin-sam">
<div id="doc3" class="yui-t7">
    <div id="hd">
        <div class="yui-gf">
            <div class="yui-u first">
                <a href="/bjlucentbus/"><img src="static_dir/logo.jpg" border="0"></a>
            </div>
            <div class="yui-u">
                <div class="yui-t4">
                    <div id="yui-main">
                        <div class="yui-b">
                            <span style="font-size: 138.5%">Beijing Alcatel-Lucent Bus</span>
                            <span style="font-size: 77%">(author: A.TNG)</span><br>
                            <span style="font-size: 77%">contact: tang.jiyu at gmail dot com / ji_yu.tang at lucent-alcatel dot com</span>
                        </div>
                    </div>
                    <div class="yui-b">
                        <ul>
                        <li><a href="static_dir/history.html" target="_blank">更新历史</a></li>
                        <li><a href="http://tinyurl.com/58rhwa" target="_blank">班车地图1.0 RC Q&A</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>    
    </div>
    <div id="bd">
    <div class="yui-gf">
    <div class="yui-u first">
    <!-- YOUR DATA GOES HERE -->
        <table width="100%" border="1" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1;" >
          <tr>
            <td width="100%"><strong>{{ banche.linenum }}</strong></td>
          </tr>
          <tr>
            <td width="100%"><strong>{{ banche.chepaihao }}</strong></td>
          </tr>
          <tr>
            <td width="100%"><strong>{{ banche.sijidianhua }}</strong></td>
          </tr>
          <tr>
            <td width="100%"><strong>{{ banche.chezhangdianhua }}</strong></td>
          </tr>
          <tr>
            <td width="100%"><strong>{{ banche.chexing }}</strong></td>
          </tr>
          <tr>
            <td width="100%">--------</td>
          </tr>
          <tr>
            <td width="100%"><a href="/bjlucentbus/">返回所有班车列表</a></td>
          </tr>
          <tr>
            <td width="100%">--------</td>
          </tr>
          {% for zhandian in zhandians %}
          <tr>
            <td width="100%">* <a href="javascript:void(0)" onclick="showBusStop('{{zhandian.lat}}', '{{zhandian.lng}}')">{{ zhandian.zhandianmingcheng }}</a>-<a href="search?key={{ zhandian.key }}&banchekey={{ banche.key }}">[修改地图标注]</a>
            </td>
          </tr>
          {% endfor%}
          <tr>
            <td width="100%">--------</td>
          </tr>
          <tr>
            <td width="100%"><a href="editline?line={{banche.key}}">发现此趟班车站点数据错误，改之！</a></td>
          </tr>
          <tr>
            <td width="100%">--------</td>
          </tr>
        </table>
    </div>
    <div class="yui-u">
    <div>
        <table width="100%" border="1" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#f8f8f8" style="border:1px solid #e1e1e1;" >
          <tr>
            <td width="50"><img src="static_dir/z.png">
                <button type="button" id="zaobanpushbutton" name="zaobanbutton">显示早班地图</button>
            </td>
            <td width="50"><img src="static_dir/w.png">
                <button type="button" id="wanbanpushbutton" name="wanbanbutton">显示晚班地图</button>
            </td>
          </tr>
        </table>
    </div>
    <div id="mapObj" class="mapStyle"></div>
    </div>
</div>
<script type="text/javascript">
var mapOptions = new MMapOptions();
mapOptions.mapId = "fmptest";
mapOptions.zoomLevel = 12;
mapOptions.center = new MLatLng('OILILITTJWJKMF','LJTGOOONJUQJGMN');
var mapObj = new MMap("mapObj", mapOptions);
function mapInited(event)
{
    mapObj.showNavigator(true);
    mapObj.setCompassScale(60);
    
    drawNightBusMap();
}
mapObj.addEventListener(MMap.EVENT_MAP_INITIALIZED, mapInited);
zhandians = {{ json_zhandians }};
icon = '{{banche.icon}}';
function drawMorningBusMap() {
    drawLineBus(zhandians, icon, 'z');
}

function drawNightBusMap() {
    drawLineBus(zhandians, icon, 'w');
}

function drawLineBus(o, icon, icon_ext) {
    // o: 站点数组
    // icon: 站点对应的icon
    // icon_ext: 站点的后缀，'z'表示早班, 'w'表示晚班
    polylineStyle = new MStyle();
    polylineStyle.lineColor = 0x663399;//线的颜色
    polylineStyle.lineSize = 4; //线的宽度
    polylineStyle.showTip = false; //不显示tip
    
    var pointStyle2 = new MStyle();
    pointStyle2.lineColor = 0x3300ff;
    pointStyle2.lineSize = 2;
    pointStyle2.fillColor = 0xddaaff;
    pointStyle2.fillOpacity = 60;
    pointStyle2.labelColor = 0x553344;    
    
    var point_arr = new Array();
    var pointoverlay_arr = new Array();
    
    ii = icon.split('.');
    icon = ii[0]+icon_ext+'.png';    
    
    var j=0
    for (i=0; i<o.length; i++) {
        if (((icon_ext == 'w') && o[i].wanban) || ((icon_ext == 'z') && o[i].zaoban)) {
            // icon_ext 为 'w' 时，显示晚班车
            // icon_ext 为 'z' 时，显示早班车
            if ((o[i].lat != null) && (o[i].lng != null)) {
                if ((o[i].lat.length > 8) && (o[i].lng.length > 8)){        
                    point_arr[j] = new MLatLng(o[i].lat, o[i].lng);
                    //pointoverlay_arr[j] = new MPointOverlay(point_arr[j], o[i].zhandianmingcheng, pointStyle2);
                    j++;
                 
                    // draw point Zhandian
                    var zhandianStyle = new MStyle();
                    zhandianStyle.textContent = o[i].zhandianmingcheng;
                    if (o[i].zaobanshijian == null) {
                        zaobanshijian = '(早班时间为-00:00)';
                    } else if (o[i].zaobanshijian == 'None') {
                        zaobanshijian = '(早班时间为-00:00)';
                    } else {
                        zaobanshijian = '(早班时间为-'+ o[i].zaobanshijian +')';
                    }
                    zhandianStyle.textContent += zaobanshijian;                    
                    var customPoint = new MCustomPointOverlay(new MLatLng(o[i].lat, o[i].lng), 
                        "http://itool.appspot.com/bjlucentbus/static_dir/"+icon, zhandianStyle);
                        //"http://localhost:8080/bjlucentbus/static_dir/"+icon, zhandianStyle);
                    mapObj.addOverlay(customPoint, true);
                }
            }
        }
    }
    if (0 != point_arr.length) {
        polyline = new MPolylineOverlay(point_arr, polylineStyle, "1001"); 
        mapObj.addOverlay(polyline,true);//true 为自动调整视野
        //mapObj.drawPoints(pointoverlay_arr, true);
    }
}

function showBusStop(lat, lng) {
    if ((lat != null) && (lng != null)) {
        if ((lat.length>8) && (lng.length>8)) {
            mapObj.setZoomLevel(15);
            mapObj.setCenterByLatLng(lat, lng);
        }
    }
}

var oZaobanPushButton = new YAHOO.widget.Button("zaobanpushbutton");
oZaobanPushButton.on("click", function (o) {
    mapObj.removeAllOverlays();
    drawMorningBusMap();
});
var oWanbanPushButton = new YAHOO.widget.Button("wanbanpushbutton");
oWanbanPushButton.on("click", function (o) {
    mapObj.removeAllOverlays();
    drawNightBusMap();
});
</script>
    </div>
    <div id="ft">
    </div>
</body>
</html>
